<template>
	<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
		<view v-for="(item, index) in navArr" :key="item.url" class="nav-item"
			:class="{current: index === tabCurrentIndex}" @click="tabChange(index)" :id="'item-' + index">
			<text class="title">{{item.title}}</text>
		</view>
	</scroll-view>


</template>

<script>
	import {
		getisOnline
	} from '@/module/index.js'
	const flag = false
	const app = getApp()
	export default {
		name: 'ss-scroll-navbar',
		props: {
			navArr: {
				type: Array,
				default () {
					return [{
						title: '动漫',
						url: 'recent'
					}, {
						title: '自然',
						url: 'hum'
					}, {
						title: '植物',
						url: 'all'
					}, {
						title: '动物',
						url: 'literature'
					}, {
						title: '海洋',
						url: 'novel'
					}, {
						title: '城市',
						url: 'education'
					}, {
						title: '美食',
						url: 'history'
					}, {
						title: '其他',
						url: 'humanity'
					}]
				}
			},
			tabCurrentIndex: {
				type: Number,
				default: 0
			},
			scrollChangeIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				scrollLeft: 0,
				widthList: [],
				screenWidth: 0,
				flag: uni.getStorageSync('is_online')
			}
		},
		methods: {
			getisOnline() {
				getisOnline().then((res) => {
					if (res.code === 200) {
						console.log(res.data.type, `dd`)
						this.flag = res.data.type
						// let stoTimer = setTimeout(() => {
						// 	clearTimeout(stoTimer)
						// 	stoTimer = null
						// }, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 导航栏navbar
			 * 点击事件
			 */
			tabChange(index) {
				this.$emit('navbarTap', index);
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -= this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
			},
			calculateItemWidth() {
				var that = this;
				var arr = [];
				let w = 0;
				this.navArr.forEach((item, index) => {
					let view = uni.createSelectorQuery().in(this).select("#item-" + index);
					view.fields({
						size: true
					}, data => {
						arr.push(data.width);
					}).exec();
				})
				this.widthList = arr;
			},
			calculateWindowWidth() {
				var info = uni.getSystemInfoSync();
				this.screenWidth = info.screenWidth;
			}
		},
		created() {
			var that = this;
			this.calculateWindowWidth();
			setTimeout(function() {
				that.calculateItemWidth();
			}, 1000);
		},
		watch: {
			scrollChangeIndex(val) {
				this.tabChange(val)
			},
		},
		onLoad() {
			// this.getisOnline()
		}
	}
</script>

<style lang="scss">
	.ss-scroll-navbar {
		width: 100%;
		height: 90upx;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;
		white-space: nowrap;

		.nav-item {
			height: 90upx;
			text-align: center;
			padding: 0upx 20upx;
			color: #303133;
			display: inline-block;
			position: relative;
			font-size: 30upx;

			.title {
				line-height: 90upx;
			}

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #ec9d00;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #ee9f00;

			&:after {
				width: 50%;
			}
		}
	}
</style>
